<template>
   <view class="index-container">
      <h-card title="上传(原生)" margin="0 0 30rpx 0" padding="12px">
         <view class="upload-image-box">
            <view class="upload-image-item" v-for="(item,index) in fileList" :key="item.path">
               <image :src="item.path" class="upload-image" @click="preView(index)"></image>
               <icon class="upload-image-delete" type="cancel" size="20" color="#ffffff" @click="deleteImgHandle(index)"></icon>
            </view>
            <view class="upload-image-btn" @click="chooseImageHandle" v-if="fileList.length<3">
               <u-icon size="50" name="camera"  color="#70737F"></u-icon>
               <text style="padding-top: 6px;">添加图片</text>
            </view>
         </view>
      </h-card>
      <!--<h-card title="上传uview-upload" margin="0 0 30rpx 0">-->
         <!--<u-upload-->
                 <!--width="160"-->
                 <!--height="160"-->
                 <!--:fileList="fileList"-->
                 <!--@afterRead="afterRead"-->
                 <!--@delete="deletePic"-->
                 <!--name="1"-->
                 <!--multiple-->
                 <!--:maxCount="3"-->
                 <!--:previewFullImage="true"-->
         <!--&gt;-->
         <!--</u-upload>-->
      <!--</h-card>-->
   </view>
</template>

<script>
    export default {
        name: "index",
		data: () => {
			return {
                fileList: []
			}
		},
        methods: {
            /** 原生*/
            chooseImageHandle(){
                let _ = this
                uni.chooseImage({
                    count: 9, //默认9
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['camera','album'], //从相册选择 'album'
                    success: function(res){
                       _.fileList.push({
                           path: "http://wxb1997.oss-cn-beijing.aliyuncs.com/img/image-20220531164831143.png"
                       })
                    }
                })
            },
            // 图片预览
            preView(index) {
                let _ = this
                let imgList = _.fileList.map( item =>{
                    //只返回图片路径
                    return item.path
                })
                console.log(imgList);
                //调用预览图片的方法
                uni.previewImage({
                    urls: imgList,
                    current: index
                })
            },

            deleteImgHandle(currentIndex){
                let _ = this
                console.log("deleteImgHandle-fileList",this.fileList)
                _.fileList.splice(currentIndex,1)
            },
        }

    }
</script>

<style lang="scss" scope>
@import 'index.scss';
</style>
